<template>
  <div class="register">
    <div class="reglable">注册账号</div>

    <div class="register-box">
      <div class="register-item">
        <div class="register-input">
          <el-input
            @blur="inputJinGao"
            @focus="inputFocus"
            @input="inputChang"
            placeholder="昵称"
            v-model="inputName"
            maxlength="7"
            clearable
          >
          </el-input>
        </div>

        <div class="register-sure" v-if="inputSure">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao">
          <img src="../../assets/img/jingao.svg" alt="" /> 昵称不能为空
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="请输入你的密码"
            v-model="inputPassword"
            @blur="inputJinGao3"
            @focus="inputFocus3"
            @input="inputChang3"
            maxlength="16"
            show-password
          >
          </el-input>
        </div>
        <div class="register-sure" v-if="inputSure3">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao3">
          <img src="../../assets/img/jingao.svg" alt="" /> 密码不能为空
        </div>

        <div class="register-tishi" v-if="inputTishi2">
          <div class="tishi-item">
            <img v-if="!inputPan2" src="../../assets/img/bluejg.svg" alt="" />
            <img v-else src="../../assets/img/sure.svg" alt="" />
            长度为8~16个字符
          </div>
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="确认密码"
            v-model="surePassword"
            @blur="inputJinGao4"
            @input="inputChang4"
            maxlength="16"
            show-password
          ></el-input>
        </div>

        <div class="register-sure" v-if="inputSure4">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao4">
          <img src="../../assets/img/jingao.svg" alt="" /> 密码不一致
        </div>
      </div>

      <div class="register-item">
        <div class="register-input">
          <el-input
            placeholder="请输入你的手机号"
            v-model="inputPhone"
            @blur="inputJinGao5"
            @focus="inputFocus5"
            @input="inputChang5"
            clearable
          >
          </el-input>
        </div>

        <div class="register-sure" v-if="inputSure5">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao5">
          <img src="../../assets/img/jingao.svg" alt="" /> 手机号错误
        </div>
      </div>

      <div class="register-item" v-if="checkingHed">
        <div class="register-yanzm">
          <el-input v-model="inputChecking" @focus="changZhun"> </el-input>

          <el-button
            type="primary"
            @click="getChecking"
            :disabled="buttonDis"
            >{{ checking }}</el-button
          >
        </div>

        <div class="register-sure" v-if="inputSure6">
          <img src="../../assets/img/gou.svg" alt="" />
        </div>

        <div class="register-jingao" v-if="jinGao6">
          <img src="../../assets/img/jingao.svg" alt="" /> 验证码错误
        </div>
      </div>

      <div class="register-item">
        <div class="register-zhuce">
          <el-button type="primary" @click="zhuce" :disabled="buttonDis2"
            >立即注册</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  isRegister,
  sendMessage,
  completeRegistration,
} from "../../network/register";

export default {
  name: "Register",
  data() {
    return {
      inputName: "",
      inputPassword: "",
      surePassword: "",
      inputPhone: "",
      inputCount: "",
      inputChecking: "",
      jinGao: false, //警告
      inputSure: false, //是否正确

      jinGao3: false,
      inputSure3: false,
      inputTishi2: false,
      inputPan2: false,

      jinGao4: false,
      inputSure4: false,

      jinGao5: false,
      inputSure5: false,

      jinGao6: false,
      inputSure6: false,
      buttonDis: true, //按钮是否可选
      buttonDis2: true, //是否能进行注册
      checking: "获取验证码",
      checkingFlag: null,
      checkingTime: 120,
      checkingHed: false, //是否显示
    };
  },

  methods: {
    //文本框失去焦点
    inputJinGao() {
      if (this.inputName == "") {
        this.jinGao = true;
      } else {
        this.jinGao = false;
        this.inputSure = true;
      }
    },
    //文本框获取焦点
    inputFocus() {
      this.jinGao = false;
    },
    //文本框的值发生改变
    inputChang() {
      if (this.inputName == "") {
        this.inputSure = false;
      }
      this.judge();
    },

    inputJinGao3() {
      if (this.inputPassword == "") {
        this.jinGao3 = true;
      }
      if (this.inputPassword.length >= 8 && this.inputPassword.length <= 16) {
        this.jinGao3 = false;
        this.inputSure3 = true;
      }
      this.inputTishi2 = false;
    },
    inputFocus3() {
      this.jinGao3 = false;
      this.inputTishi2 = true;
    },
    inputChang3() {
      if (this.inputPassword.length >= 8 && this.inputPassword.length <= 16) {
        this.inputPan2 = true;
      } else {
        this.inputPan2 = false;
        this.inputSure3 = false;
      }
      this.judge();
    },

    inputJinGao4() {
      if (this.surePassword != this.inputPassword || this.surePassword == "") {
        this.jinGao4 = true;
      } else {
        this.jinGao4 = false;
        this.inputSure4 = true;
      }
    },
    inputChang4() {
      if (this.surePassword != this.inputPassword || this.surePassword == "") {
        this.inputSure4 = false;
      }

      if (this.surePassword == this.inputPassword) {
        this.jinGao4 = false;
      }
      this.judge();
    },

    inputJinGao5() {
      isRegister(this.inputPhone).then((res) => {
        if (res.data.code == 500) {
          this.$alert("此手机号已注册过账号", "提示", {
            confirmButtonText: "确定",
          });
          this.inputSure5 = false;
          this.buttonDis = true;
        } else {
          let verify =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          if (this.inputPhone != "" || verify.test(this.inputPhone)) {
            this.jinGao5 = false;
            this.inputSure5 = true;
            this.buttonDis = false;
          } else {
            this.checkingHed = false;
            this.jinGao5 = true;
          }
        }
      });
      this.judge();
    },

    inputFocus5() {
      this.jinGao5 = false;
      this.checkingHed = true;
    },

    inputChang5() {
      let verify =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.inputPhone == "" || !verify.test(this.inputPhone)) {
        this.inputSure5 = false;
      } else {
        this.inputSure5 = true;
        this.buttonDis = false;
      }
      this.judge();
    },

    getChecking() {
      sendMessage(this.inputPhone).then((res) => {
        console.log(res);
        if (res.data.code == 500) {
          this.$message({
            showClose: true,
            type: "error",
            iconClass: "ss",
            message: "发送验证码失败",
          });
        } else {
          this.buttonDis = false;
        }
      });

      this.checkingFlag = setInterval(() => {
        this.checking = this.checkingTime + "s";
        this.checkingTime--;
        this.buttonDis = true;

        if (this.checkingTime == 0) {
          this.flag = clearInterval(this.checkingFlag);
          this.checking = "重新获取";
          this.checkingTime = 120;
          this.buttonDis = false;
        }
      }, 1000);
    },

    changZhun() {
      this.jinGao6 = false;
    },
    zhuce() {
      completeRegistration(
        this.inputChecking,
        this.inputName,
        this.inputPhone,
        this.inputPassword
      ).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$router.push("/login");
        } else {
          this.jinGao6 = true;
        }
      });
    },
    //判断所需的消息是否正确
    judge() {
      if (
        this.inputSure &&
        this.inputSure3 &&
        this.inputSure4 &&
        this.inputSure5
      ) {
        this.buttonDis2 = false;
      } else {
        this.buttonDis2 = true;
      }
    },
    handleResize() {
      this.hrights = document.documentElement.clientHeight + "px";
      console.log(this.hrights);
    },
  },
};
</script>

<style>
.register {
  width: 100%;
}
.reglable {
  font-size: 0.2rem;
  margin-top: 0.2rem;
  margin-left: 4.4rem;
}

.register-item {
  margin: 0 auto;
  position: relative;
  width: 3rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.register-input {
  width: 2.5rem;
}

.register-yanzm {
  display: flex;
  width: 2.5rem;
}

.register-zhuce button {
  width: 2.5rem;
}

.register-yanzm input {
  width: 1.2rem;
}

.register-yanzm button {
  background-color: rgb(64, 158, 255);
  width: 1.2rem;
  border-radius: 0.05rem;
  color: #fff;
}

.register-sure {
  position: absolute;
  top: 0.1rem;
  right: 0.3rem;
}

.register-sure img {
  width: 0.15rem;
  height: 0.15rem;
}

.register-jingao {
  display: flex;
  justify-content: left;
  color: red;
  font-size: 0.1rem;
  align-items: center;
  margin-top: 0.08rem;
}

.register-jingao img {
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.1rem;
}

.tishi-item {
  display: flex;
  align-items: center;
  margin-top: 0.08rem;
  font-size: 0.1rem;
  color: rgb(145, 143, 143);
}

.register-tishi img {
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.1rem;
}

.registimg {
  width: 5.2rem;
  height: 100%;
}

.registimg img {
  width: 100%;
  height: 100%;
}

.reg-text {
  font-size: 0.18rem;
  margin-left: 0.1rem;
  margin-top: -0.4rem;
  margin-bottom: 0.3rem;
}
</style>